<template>
    <!--商品详细-->
    <div class="goods_info" v-if="goods!=null">
        <div class="info">
            <div class="left">
                <div class="img">
                    <el-image
                            style="width: 100%;height: 100%;border-radius: 10px;"
                            :src="goods.homeImg"
                            :preview-src-list="goods.busFiles.map(x=>x.path)">
                    </el-image>
                </div>
                <div class="img-item">
                    <el-row :gutter="20">
                        <el-col :span="6" v-for="(item,i) in goods.busFiles" :key="i">
                            <img style="width: 100%;height: 100%;border-radius: 10px;"
                                 :src="item.path" alt="" @click="goods.homeImg=item.path">
                        </el-col>
                    </el-row>

                </div>
            </div>
            <div class="right">
                <span class="title">
                    {{goods.name}}
                </span>
                <div class="title-li">
                    <span class="title-point">[{{goods.category | fmtDict(categoryList)}}]</span>
                    <span class="title-desc">{{ goods.busDicts| materialFilter(materialList)}}</span>
                </div>
                <div class="info-list">
                    <div class="item">
                        <span class="label">价格</span>
                        <p class="content" style="color: #ff6a00;font-size: 20px;font-weight: bold">￥{{goods.price}}</p>
                    </div>
                    <div class="item">
                        <span class="label">花语</span>
                        <p class="content">{{goods.says}}！</p>
                    </div>
                    <div class="item">
                        <span class="label">材料</span>
                        <p class="content">
                            {{ goods.busDicts| materialFilter(materialList)}}
                        </p>
                    </div>
                    <div class="item">
                        <span class="label">包装</span>
                        <p class="content">{{goods.packaging}}</p>
                    </div>
                    <div class="item">
                        <span class="label">配送说明</span>
                        <p class="content">{{goods.distributionNote}}</p>
                    </div>
                    <div class="item">
                        <span class="label">店铺</span>
                        <p class="content">{{goods.infoMerchants.name}}</p>
                    </div>
                    <div class="item">
                        <span class="label">联系人</span>
                        <p class="content">{{goods.infoMerchants.contact}}</p>
                    </div>
                    <div class="item">
                        <span class="label">联系电话</span>
                        <p class="content">{{goods.infoMerchants.contactPhone}}</p>
                    </div>
                </div>

                <div class="btn">
                    <el-button @click="$cart.add(goods)">加入购物车</el-button>
                </div>
            </div>
        </div>
        <el-divider>商品详情</el-divider>
        <div class="text">
            <p v-html="goods.text"></p>
        </div>
    </div>
</template>

<script>
    import {fmtDict} from "../../filter";

    export default {
        name: "goods_info",
        data() {
            return {
                goods: null,
                //商品类别集合
                categoryList:[],
                //获取材料集合
                materialList:[],
            }
        },
        filters:{
            materialFilter:function(val,list){
                let str="";
                let arr=val.filter(x=>x.code=='material').map(x=>x.value);
                for (let i = 0; i < arr.length; i++) {
                    str+=fmtDict(arr[i],list)+val[i].extend+"枝,";
                }
                return str.substr(0, str.length - 1)
            }
        },
        created() {
            this.init();
        },
        methods: {
            init() {
                //查询商品
                this.$HttpService.get("/info-goods/get-by-id/"+this.$route.params.id).then(res=>{
                    res.busFiles=res.busFiles.map(y=>{
                        y.path=this.$util.getFileUrl(y.path);
                        return y;
                    })
                    if(res.busFiles.length>0){
                        res.homeImg=res.busFiles[0].path;
                    }
                    this.goods=res;
                })
                //查询商品类别
                this.$HttpService.get("/common/getItem/goods_category").then(res => {
                    this.categoryList = res;
                })
                //查询材料集合
                this.$HttpService.get("/common/getItem/material").then(res => {
                    this.materialList = res;
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .goods_info {
        width: 70%;
        margin: 0 auto;
        padding-top: 20px;

        .info {
            width: 100%;
            display: flex;

            .left {
                width: 30%;

                .img {
                    width: 100%;
                    height: 500px;
                }

                .img-item {
                    margin: 0 auto;
                    margin-top: 10px;
                    width: 90%;
                    display: flex;
                    img{
                        border: 2px solid #e6e6e6;
                    }
                    img:hover {
                        border: 2px solid #FF734C;
                    }
                }
            }

            .right {
                margin-left: 5%;
                flex: 1;

                .title {
                    font-size: 22px;
                    line-height: 22px;
                    color: #232628;
                    font-weight: bold;
                }

                .title-li {
                    margin-top: 8px;

                    .title-point {
                        font-size: 16px;
                        line-height: 20px;
                        color: #FF3D12;
                    }

                    .title-desc {
                        margin-left: 12px;
                        font-size: 16px;
                        line-height: 20px;
                        color: #232628;
                    }
                }

                .info-list {
                    background: transparent;
                    border-bottom: 1px solid #e7ebef;

                    .item {
                        margin-top: 30px;
                    }

                    .label {
                        display: inline-block;
                        width: 80px;
                        padding-left: 5px;
                        font-size: 13px;
                        line-height: 18px;
                        color: #71797F;
                        vertical-align: top;
                    }

                    .content {
                        display: inline-block;
                        width: 580px;
                        font-size: 13px;
                        line-height: 18px;
                        color: #232628;
                        vertical-align: top;
                        text-align: justify;
                        padding-right: 36px;
                    }
                }

                .btn {
                    width: 100%;
                    margin-top: 10px;

                    /deep/ .el-button {
                        float: right;
                        color: #ffffff;
                        background-color: #ff6a00;
                        border-color: #ff6a00;
                    }
                }
            }
        }

        .text{
            margin-top: 10px;
            text-align: center;
            width: 100%;
        }

    }
</style>
